<template>
	<div class="zfz-search-bar" :style="{backgroundColor: backgroundColor}">
		<div class="zfz-search-bar-inner">
			<em class="icon-search" ></em>
			<input type="text" ref="input" v-model='currentValue' :placeholder="placeholder" class="zfz-search-bar-core" id="" value="" />
			<em class="cancle-btn" v-show='visible' @click="clearText"></em>
		</div>
		<div class="zfz-search-bar-confrim" v-show='visible' v-text='confirmText' @click="search">
			搜索
		</div>
	</div>
</template>

<script>
	export default {
		name: "zfz-search",
		data() {
			return {
				visible: false,
				currentValue: this.value,
			}
		},
		props: {
			backgroundColor: {
				type: String,
				default: "#fff"
			},
			value: String,
			autofocus: {
				type: Boolean,
				default: false
			},
			confirmText: {
				type: String,
				default: '搜索'
			},
			placeholder: {
				type: String,
				default: '搜索'
			}
		},
		watch: {
			currentValue(val) {
				if(val.length > 0) {
					this.visible = true
				} else {
					this.visible = false
				}
				this.$emit('input', val)
			},
			value(val) {
				this.currentValue = val
			}
		},
		mounted() {
			this.autofocus && this.$refs.input.focus();
		},
		methods: {
			clearText(){
				this.currentValue = ''
			},
			search() {
				this.$emit('search');
			}
		}
	}
</script>

<style lang="scss">
	.zfz-search-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90px;
		padding: 0 15px;
		.zfz-search-bar-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			height: 56px;
			padding: 4px 6px;
			border-radius: 4px;
			background-color: #f8f8f8;
			.icon-search {
				flex-shrink: 0;
				width: 30px;
				height: 30px;
				margin-right: 15px;
				/*background-color: #4A4A4A;*/
				background: url('./search.svg') 0 0 no-repeat;
				background-size: cover;
			}
			input {
				width: 100%;
				height: 100%;
				outline: 0;
				box-sizing: border-box;
				appearance: none;
				background: transparent;
				color: #67666b;
				border: 0;
			}
			.cancle-btn {
				flex-shrink: 0;
				height: 30px;
				width: 30px;
				background: url('./delete.svg') 0 0 no-repeat;
				background-size: cover;
			}
		}
		.zfz-search-bar-confrim {
			flex-shrink: 0;
			margin-left: 30px;
			color: #67666B;
			font-size: 30px;
			text-align: right;
		}
	}
</style>